<template>
  <div class="salesPlanDetail">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
        >删除</el-button>
      </el-col> -->
    </el-row>

    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column label="产品名称" prop="productName" align="center" />
      <el-table-column label="数量" prop="saleCount" align="center" />
      <!-- <el-table-column label="销售计划ID" prop="salePlanId" align="center" /> -->
      <!-- <el-table-column 
        :label="i.confContent" 
        align="center" 
        :prop="i.confContent" 
        v-for="i in maxLengthArray" 
        :key="i.id" 
      /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="title" :visible.sync="dialogVisible" @close="cancel" width="500px">
      <el-form ref="form" :model="form" label-width="80px">
        <!-- <el-form-item :label="i.confContent" prop="productNum" v-for="i in maxLengthArray" :key="i.id">
          <el-input v-model.trim="form[i.confContent]" maxlength="30" :placeholder="'请输入'+ i.confContent" />
        </el-form-item> -->
        <!-- <el-form-item label="车型&颜色" prop="saleCount">
          <el-input-number v-model="form.saleCount" :min="0" ></el-input-number>
        </el-form-item> -->
        <el-form-item label="产品名称" prop="productId">
          <el-select v-model.trim="form.productId" placeholder="请输入产品名称" >
            <el-option
              v-for="dict in productList"
              :key="dict.itemId"
              :label="dict.itemName"
              :value="dict.itemId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="saleCount">
          <el-input-number v-model="form.saleCount" :min="0" ></el-input-number>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  listSalesPlanDetail, 
  addSalesPlanDetail, 
  editSalesPlanDetail, 
  delSalesPlanDetail,
  importSalesPlan,
  getProductConf,
  addProductConf,
  editProductConf,
  delProductConf,
} from "@/api/mes/sales/salesPlan";
import { listMdItem } from "@/api/mes/md/mdItem";
export default {
  name: 'salesPlanDetail',
  props: {
    salesPlanId: undefined,
    itemTypeId: undefined,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        salePlanId: this.salesPlanId,
      },
      open: false,
      loading: false,
      dialogVisible: false,
      form: {},
      tableTitleList: [],
      maxLengthArray: null,
      title: '',
      rowNum: 0,
      obj: null,
      productList: [], // 产品列表
    }
  },
  watch: {
    salesPlanId(val){
      this.queryParams.salePlanId = val;
      this.getList();
    }
  },
  methods: {
    getList(){
      this.tableData = []
      // this.maxLengthArray = null
      listSalesPlanDetail(this.queryParams).then(response => {
        this.tableData = response.data;
        // const obj = response.data;
        // this.obj = response.data;
        // // let maxLengthArray = null;
        // let maxLength = 0;
        // if(response.code === 200&&response.data){
        //   Object.keys(obj).forEach((key, ind)=> {
        //     if (Array.isArray(obj[key]) && obj[key].length > maxLength) {
        //       maxLength = obj[key].length;
        //       this.maxLengthArray = obj[key];
        //     }
        //     obj[key].forEach(item=>{
        //       this.tableData[ind]={rowIndex:ind, ...this.tableData[ind], [item.confContent]:item.objValue}
        //       this.rowNum = item.rowNum
        //     })
        //   });
        // }
      }).finally(() => {
        // this.loading = false;
        // console.log(this.maxLengthArray, this.tableData, 'objValue', this.rowNum);
      })
      // getProductConf({itemTypeId:this.itemTypeId}).then(response => {
      //   this.tableTitleList = response.rows;
      //   console.log(response);
      // })
    },
    reset(){
      // this.maxLengthArray.forEach(i=>{
      //   this.$set(this.form, i.confContent, '')
      // })
      this.form = {
        productId: undefined,
        saleCount: undefined,
      }
    },
    handleAdd(){
      this.title = '新增明细';
      this.dialogVisible = true;
      this.reset()
      listMdItem({pageNum:1, pageSize: 9999, itemTypeId:this.itemTypeId}).then(response => {
        this.productList = response.rows;
        console.log(response);
      })
      console.log('handleAdd');
    },
    handleEdit(row){
      this.title = '编辑明细';
      this.dialogVisible = true;
      this.form = {...row};
      console.log('handleEdit', row);
    },
    handleDelete(row){
      let ids = row.id
      this.$confirm('确定删除该条数据吗?').then(() => {
        // Object.values(this.obj)[row.rowIndex].forEach(i=>{
        //   ids += i.id + ','
        // })
        delSalesPlanDetail(ids).then(response => {
          if(response.code === 200){
            this.$message.success('删除成功');
            this.getList();
            console.log(response);
          }
        })
        console.log('handleDelete', row);
      })
    },
    submitForm(){
      if(this.title == '新增明细'){
        // console.log(this.form.rowIndex)
        // this.maxLengthArray.forEach(i=>{
        //   Object.keys(this.form).forEach((key)=> {
        //     if(i.confContent == key){
        //       i.objValue = this.form[key]
        //       i.rowNum = this.rowNum + 1
        //     }
        //   })
        // })
        // console.log(this.maxLengthArray);
        this.form.salePlanId = this.salesPlanId;
        addSalesPlanDetail([this.form]).then(response => {
          if(response.code === 200){
            this.$message.success('新增成功');
            this.getList();
            this.dialogVisible = false;
            console.log(response);
          }
        })
      }else{
        // Object.values(this.obj)[this.form.rowIndex].forEach(i=>{
        //   Object.keys(this.form).forEach((key)=> {
        //     if(i.confContent == key){
        //       i.objValue = this.form[key]
        //       i.rowNum = this.form.rowIndex + 1
        //     }
        //   })
        // })
        // editSalesPlanDetail(Object.values(this.obj)[this.form.rowIndex]).then(response => {
        editSalesPlanDetail([this.form]).then(response => {
          if(response.code === 200){
            this.$message.success('编辑成功');
            this.getList();
            this.dialogVisible = false;
            console.log(response);
          }
        })
        // console.log('新增成功', this.form.rowIndex, Object.values(this.obj)[this.form.rowIndex])
        // editSalesPlanDetail
        // this.$message.success('新增成功');
      }
    },
    cancel(){
      this.dialogVisible = false;
      this.$refs.form.resetFields();
      this.reset()
      console.log('cancel');
    },
  }
}
</script>

<style lang="scss" scoped>

</style>